<template>
  <div class="withdraw-container">
    <div class="widthdraw-pos" @click="onClckDiolag">
      <div class="left">
        <div class="left-1">提现至:</div>
        <div class="left-2">
          <image
            src="../../assets/images/myImg/zfb.png"
            mode="widthFix"
            style="width: 20px; height: 20px"
          ></image>
        </div>
        <div class="left-3">
          <span style="color: #15181d">支付宝</span>
          <span
            style="color: #858a99; margin-left: 5px"
            v-if="Userinfo.name && Userinfo.zfbCount"
            >({{ Userinfo.name }} {{ Userinfo.zfbCount }})</span
          >
          <span style="color: #858a99; margin-left: 5px" v-else
            >(请输入支付宝账号)</span
          >
        </div>
      </div>
      <div class="right iconfont icon-jinrujiantou1"></div>
    </div>
    <div class="widthdraw-money">
      <div class="row1">
        <div class="row1-title">可提现余额:</div>
        <div class="row1-money">
          {{ (Userinfo.balance / 100).toFixed(2) }} 元
        </div>
      </div>
      <div class="row2">
        <div class="row2-left">
          <div class="row2-left-q">￥</div>
          <div>
            <nut-input
              v-model="moneyValue"
              :border="false"
              placeholder="最少提现10元"
              type="digit"
            />
          </div>
        </div>
        <div class="row2-right" @click="allWithdraw">全部提现</div>
      </div>
    </div>
    <div class="btn">
      <nut-button
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        :disabled="!moneyValue"
        @click="immediateWithdraw"
        >立即提现</nut-button
      >
      <div class="btn-show">提现说明</div>
    </div>
  </div>
  <nut-dialog title="确认支付宝账号" v-model:visible="phoneInputVisible">
    <template v-slot:default>
      <nut-input
        max-length="11"
        v-model="Userinfo.name"
        placeholder="请输入姓名"
        type="text"
      />
      <nut-input
        v-model="Userinfo.zfbCount"
        placeholder="请输入支付宝账号"
        type="text"
      />
    </template>

    <template v-slot:footer>
      <nut-row :gutter="10">
        <nut-col :span="12">
          <div class="flex-content">
            <nut-button
              type="default"
              block
              @click="
                () => {
                  phoneInputVisible = false;
                }
              "
              >取消</nut-button
            >
          </div>
        </nut-col>
        <nut-col :span="12">
          <div class="flex-content flex-content-light">
            <nut-button type="primary" block @click="onConfirm"
              >确定</nut-button
            >
          </div>
        </nut-col>
      </nut-row>
    </template>
  </nut-dialog>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import * as userApi from "../../api/user";
import * as withdrawApi from "../../api/withdraw";
import { useUserStore } from "../../store";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { Userinfo } = storeToRefs(userStore);

const moneyValue = ref("");
const phoneInputVisible = ref(false);
const onConfirm = async () => {
  if (!Userinfo.value.name || !Userinfo.value.zfbCount) {
    Taro.showToast({
      title: "任何一项不能为空",
      icon: "none",
    });
    return;
  }
  console.log(123);
  const res = await userApi.updatedUserInfo({
    name: Userinfo.value.name,
    zfbCount: Userinfo.value.zfbCount,
  });
  console.log(res);
  userStore.getUserinfo();
  phoneInputVisible.value = false;
};
onMounted(() => {
  userStore.getUserinfo();
});
const onClckDiolag = () => {
  phoneInputVisible.value = true;
};
const allWithdraw = () => {
  // if (Userinfo.balance) {
  console.log(Userinfo.value.balance);

  if (Userinfo.value.balance > 0) {
    console.log(Userinfo.value.balance);
    console.log(123);
    moneyValue.value = (Userinfo.value.balance / 100).toFixed(2);
  }
  // }
};
const immediateWithdraw = async () => {
  if (moneyValue.value > Userinfo.value.balance / 100) {
    Taro.showToast({
      title: "余额不足",
      icon: "error",
    });
    return;
  }
  let data = {
    totalMoney: Userinfo.value.balance / 100,
    withDrawMoney: moneyValue.value,
    zfbCount: Userinfo.value.zfbCount,
    type: 0,
  };
  Taro.showModal({
    title: "提示",
    content: "你确定提现当前的金额吗",
    success: async function (res) {
      if (res.confirm) {
        const res = await withdrawApi.withDraw(data);
        moneyValue.value = 0;
        userStore.getUserinfo();

        console.log(res);
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
</script>
<style lang="scss">
.withdraw-container {
  padding: 25px;
  display: flex;
  flex-direction: column;
  .widthdraw-pos {
    border-radius: 15px;
    background-color: #fff;
    padding: 40px 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      font-size: 30px;
      color: #858a99;
      font-weight: 700;
    }
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 24px;
      .left-1 {
      }
      .left-2 {
        margin-left: 15px;
      }
      .left-3 {
        margin-left: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .widthdraw-money {
    margin-top: 20px;
    background-color: #fff;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 15px;
    .row1 {
      display: flex;
      font-size: 24px;
      //   justify-content: center;
      align-items: center;
      // align-items: center;
      .row1-money {
        margin-left: 10px;
        color: #15181d;
      }
      .row1-title {
        color: #858a99;
      }
    }
    .row2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 25px;
      .row2-right {
        font-size: 22px;
        color: #ff6034;
      }
      .row2-left {
        display: flex;
        justify-content: center;
        align-items: center;
        .row2-left-q {
          //   font-size: 36px;
          color: #15181d;
          font-weight: 700;
        }
      }
    }
  }
  .btn {
    padding: 0 25px;
    margin-top: 40px;
    .nut-button--default {
      border: none;
    }
    .btn-show {
      color: #ff6034;
      font-size: 22px;
      text-align: center;
      margin-top: 25px;
    }
  }
}
</style>
